@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .animate-fade-in {
    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
  }

  .animate-fade-in-delayed {
    opacity: 0;
    animation: fadeIn 0.8s ease-out 0.2s forwards;
  }

  .animate-scale-x {
    transform-origin: left;
    transform: scaleX(0);
    animation: scaleX 0.8s ease-out 0.4s forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes scaleX {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }
}

@layer base {
  @font-face {
    font-family: "Playfair Display";
    src: url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap");
  }
}

.font-serif {
  font-family: "Playfair Display", serif;
}

